<template>
	<div id="app" name="main" @scroll="handleScroll">
		<div class="header">
			<div class="login">
				<router-link to="/user"><img src="../assets/lfl/icon_user.png" /></router-link>
			</div>
			<div class="text">
				<p>二手房/租房</p>
				<p>
					<h2>海量真房源</h2></p>
				<p>
					<h2>省心来乌龟</h2></p>
			</div>
			<div class="search">
				<van-search placeholder="请输入小区或商圈" />
			</div>
		</div>
		<div class="banner">
			<div class="item">
				<div class="item-t">
					<router-link to="/list"><img src="../assets/lfl/icon_ershoufang.png" /></router-link>

				</div>
				<div class="item-b">
					二手房
				</div>
			</div>
			<div class="item">
				<div class="item-t">
					<router-link to="/list"><img src="../assets/lfl/icon_haiwai.png" /></router-link>
				</div>
				<div class="item-b">
					本地
				</div>
			</div>
			<div class="item">
				<div class="item-t">
					<router-link to="/list"><img src="../assets/lfl/icon_xinfang.png" /></router-link>

				</div>
				<div class="item-b">
					新房
				</div>
			</div>
			<div class="item">
				<div class="item-t">
					<router-link to="/list"><img src="../assets/lfl/icon_zufang.png" /></router-link>

				</div>
				<div class="item-b">
					租房
				</div>
			</div>
		</div>
		<h5 style="padding-left: 0.3rem;">为您推荐</h5>
		<div class="list">
			<div class="list-l">
				<img src="../assets/lfl/listimg.jpg" />
			</div>
			<div class="list-r">
				<!--//简介-->
				<p style="font-size: 14px;">半山壹号小凉房，装修良好，宜家风格</p>
				<!--//位置及规格-->
				<p style="font-size: 12px;color: #858585;">2室2厅/54.87m²/东南/半山壹号</p>
				<!--//价格-->
				<p>6500元/月</p>
			</div>
		</div>
		<div class="list">
			<div class="list-l">
				<img src="../assets/lfl/listimg.jpg" />
			</div>
			<div class="list-r">
				<!--//简介-->
				<p style="font-size: 14px;">半山壹号小凉房，装修良好，宜家风格</p>
				<!--//位置及规格-->
				<p style="font-size: 12px;color: #858585;">2室2厅/54.87m²/东南/半山壹号</p>
				<!--//价格-->
				<p>6500元/月</p>
			</div>
		</div>
		<div class="list">
			<div class="list-l">
				<img src="../assets/lfl/listimg.jpg" />
			</div>
			<div class="list-r">
				<!--//简介-->
				<p style="font-size: 14px;">半山壹号小凉房，装修良好，宜家风格</p>
				<!--//位置及规格-->
				<p style="font-size: 12px;color: #858585;">2室2厅/54.87m²/东南/半山壹号</p>
				<!--//价格-->
				<p>6500元/月</p>
			</div>
		</div>
		<div class="list">
			<div class="list-l">
				<img src="../assets/lfl/listimg.jpg" />
			</div>
			<div class="list-r">
				<!--//简介-->
				<p style="font-size: 14px;">半山壹号小凉房，装修良好，宜家风格</p>
				<!--//位置及规格-->
				<p style="font-size: 12px;color: #858585;">2室2厅/54.87m²/东南/半山壹号</p>
				<!--//价格-->
				<p>6500元/月</p>
			</div>
		</div>
		<div class="list">
			<div class="list-l">
				<img src="../assets/lfl/listimg.jpg" />
			</div>
			<div class="list-r">
				<!--//简介-->
				<p style="font-size: 14px;">半山壹号小凉房，装修良好，宜家风格</p>
				<!--//位置及规格-->
				<p style="font-size: 12px;color: #858585;">2室2厅/54.87m²/东南/半山壹号</p>
				<!--//价格-->
				<p>6500元/月</p>
			</div>
		</div>
	
	</div>

</template>

<script>
	export default {
		name: 'home',
		data() {
			return {

			}
		},
		mounted: function() {
			window.addEventListener('scroll', this.handleScroll, true); // 监听（绑定）滚轮滚动事件
		},
		methods: {
			handleScroll: function() {
				//滚动条在Y轴上的滚动距离

				function getScrollTop() {　　
					var scrollTop = 0,
						bodyScrollTop = 0,
						documentScrollTop = 0;　　
					if(document.body) {　　　　
						bodyScrollTop = document.body.scrollTop;　　
					}　　
					if(document.documentElement) {　　　　
						documentScrollTop = document.documentElement.scrollTop;　　
					}　　
					scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;　　
					return scrollTop;
					console.log(scrollTop)
				}

				//文档的总高度

				function getScrollHeight() {　　
					var scrollHeight = 0,
						bodyScrollHeight = 0,
						documentScrollHeight = 0;　　
					if(document.body) {　　　　
						bodyScrollHeight = document.body.scrollHeight;　　
					}　　
					if(document.documentElement) {　　　　
						documentScrollHeight = document.documentElement.scrollHeight;　　
					}　　
					scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;　　
					return scrollHeight;
				}

				//浏览器视口的高度

				function getWindowHeight() {　　
					var windowHeight = 0;　　
					if(document.compatMode == "CSS1Compat") {　　　　
						windowHeight = document.documentElement.clientHeight;　　
					} else {　　　　
						windowHeight = document.body.clientHeight;　　
					}　　
					return windowHeight;
				}

				window.onscroll = function() {　
					var load=document.querySelector(".van-loading");
					if(getScrollTop() + getWindowHeight() == getScrollHeight()) {
					
						setTimeout(function  () {
							
						},2000)
						　　　　
					
					}
				};

			}
		},
	}
</script>

<style scoped>
	.header {
		width: 7.5rem;
		height: 5.2rem;
		background-image: url(../assets/lfl/head_bg.jpg);
		background-size: cover;
		position: relative;
		left: 0;
		top: 0;
	}
	
	.login {
		position: absolute;
		top: 0.6rem;
		left: 6.4rem;
	}
	
	.login img {
		width: 0.7rem;
		height: 0.7rem;
	}
	
	.text {
		position: absolute;
		left: 1rem;
		top: 1.8rem;
		color: white;
	}
	
	.text>p:first-of-type {
		font-size: 12px;
	}
	
	.search {
		position: absolute;
		top: 4.65rem;
		left: 50%;
		transform: translate(-50%);
	}
	
	.van-search {
		border-radius: 0.5rem;
		width: 4.5rem;
		box-shadow: 1px 2px #DCDCDC;
	}
	
	.banner {
		height: 3.4rem;
		width: 7.5rem;
		display: flex;
		justify-content: space-around;
	}
	
	.item {
		margin-top: 1.2rem;
		text-align: center;
		font-size: 14px;
		color: #101D37;
	}
	
	.item-t img {
		width: 1rem;
		height: 1rem;
	}
	
	.list {
		margin: auto;
		width: 6.5rem;
		height: 2.7rem;
		border-bottom: 1px solid gainsboro;
	}
	
	.list-l {
		width: 2.15rem;
		height: 1.65rem;
		margin-top: 0.35rem;
		float: left;
	}
	
	.list-l img {
		width: 2.15rem;
		height: 1.65rem;
		border-radius: 0.1rem;
	}
	
	.list-r {
		float: right;
		width: 3.95rem;
		height: 1.65rem;
		margin-top: 0.35rem;
	}
	
	.list-r p:nth-of-type(3) {
		font-size: 20px;
		color: #fa533b;
		font-weight: 400;
	}
	
	.van-loading {
		width: 60px!important;
		height: 60px!important;
		margin: auto;
	}
</style>